
.banner{
    width:100vw;
    height:50vw;
    vertical-align: bottom;
}
.tabs{
    height:13.33vw;
    display: flex;
    align-items: center;
    background: #f1f1f1;
}
.tabs .tabes,.tabs .tabes li{
    height:9.33vw;
    line-height:9.33vw;
    font-size: 0;
}
.tabs .tabes li{
    display: inline-block;
    position: relative;
}
.tabs .tabes a{
    vertical-align: bottom;
    display: inline-block;
    width:calc((100vw - 0.54vw) / 3);
    background: #f00;
    font-size: 0.4rem;
    text-align: center;
    color: #999;
    background: #fff;
    position: relative;
}
.tabs .tabes a.active{
    color: #ff4040;
}
.tabs .tabes a:nth-child(2),.tabs .tabes li:nth-child(2){
    margin-left: 0.27vw;
    margin-right: 0.27vw;
}

.tabs .tabes a{
    background: linear-gradient(135deg, transparent 1.07vw , #ffffff 0) top left, linear-gradient(225deg, transparent 1.07vw, #ffffff 0) top right, linear-gradient(-45deg, transparent 1.07vw, #ffffff 0) bottom right, linear-gradient(45deg, transparent 1.07vw, #ffffff 0) bottom left;
    background-size: 60% 60%;
    background-repeat: no-repeat;
}

.content{
    background: #fff;
}

.content .content-commend{
    display: flex;
    align-items:center;
    color: #f71e1e;
    font-size: 0.46rem;
    margin-top: 2.66vw;
}
.content .content-commend:before{
    display: inline-block;
    content: '';
    width:1.06vw;
    margin-right: 2.67vw;
    height:4.27vw;
    background: #f71e1e;
    border-radius: 2px;
}
.content .list{
    /*padding: 0 3.2vw;*/
}
.content .list ul a {
    display: block;
    overflow: hidden;
    padding: 4vw 0vw;
    border-bottom: 1px solid #f1f1f1;
    position:relative;
    height:26.7vw;
    padding-left: 3.2vw;
    padding-right: 3.2vw;
}
.content .list ul a img{
    width: 24vw;
    height: 18.7vw;
    float: left;
    margin-right: 2vw;
    border-radius: 4px;
}
.content .list ul a p{
    font-size: 0.38rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top: 1.07vw;
}
.content .list ul a span{
    font-size: 0.32rem;
    color: #999;
}
.content .list ul a span:nth-child(3){
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space:nowrap;
    width: 50%;
    position: absolute;
    bottom: 3.5vw;
}
.content .list ul a span:nth-child(4){
    position: absolute;
    right: 3vw;
    bottom: 3.5vw;
    font-family: 'Microsoft YaHei';
}

@media screen and (device-width: 320px){
    .content .list ul a span:nth-child(3),.content .list ul a span:nth-child(4){
        bottom:3.2vw;
    }
}
@media screen and (device-width: 1080px){
    .content .list ul a span:nth-child(3),.content .list ul a span:nth-child(4){
        bottom:3.6vw;
    }
}

.fixed{
    position: fixed;
    top:0;
    z-index: 999;
    margin-top: -2vw;
}

.hidden{
    display: none;
}

/*加载动画*/
.tip {
    height: 10.6vw;
    text-align: center;
    line-height: 10.6vw;
    color: #c1c1c1;
    font-size:0.34rem;
}

.loading {
    width: 100%;
    height:10.6vw
}
.typing_loader {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-animation: typing 1s linear infinite alternate;
    -moz-animation: Typing 1s linear infinite alternate;
    animation: typing 1s linear infinite alternate;
    position: relative;
    top: 5.3vw;
    left: calc( 50vw - 15px );
}
@-webkit-keyframes typing {
    0% {
        background-color: rgba(0, 0, 0, 0.8);
        box-shadow: 12px 0 0 0 rgba(0, 0, 0, 0.2), 24px 0 0 0 rgba(0, 0, 0, 0.2);
    }
    25% {
        background-color: rgba(0, 0, 0, 0.4);
        box-shadow: 12px 0 0 0 rgba(0, 0, 0, 0.8), 24px 0 0 0 rgba(0, 0, 0, 0.2);
    }
    75% {
        background-color: rgba(0, 0, 0, 0.4);
        box-shadow: 12px 0 0 0 rgba(0, 0, 0, 0.2), 24px 0 0 0 rgba(0, 0, 0, 0.8);
    }
}
@keyframes typing {
    0% {
        background-color: rgba(0, 0, 0, 0.8);
        box-shadow: 12px 0 0 0 rgba(0, 0, 0, 0.2), 24px 0 0 0 rgba(0, 0, 0, 0.2);
    }
    25% {
        background-color: rgba(0, 0, 0, 0.4);
        box-shadow: 12px 0 0 0 rgba(0, 0, 0, 0.8), 24px 0 0 0 rgba(0, 0, 0, 0.2);
    }
    75% {
        background-color: rgba(0, 0, 0, 0.4);
        box-shadow: 12px 0 0 0 rgba(0, 0, 0, 0.2), 24px 0 0 0 rgba(0, 0, 0, 0.8);
    }
}
.content a:active{
    background-color: rgba(0,0,0,.1)!important;
    /*background-image: -webkit-repeating-radial-gradient(#f00 0%,#fff 100%)!important;*/
    /*background-color: repeating-radial-gradient(blue 20%,green 50%)!important;*/
    /*-webkit-tap-highlight-color: rgba(0,0,0,0.1);*/
}
.press{
    background:#ff5555!important;
    color:#fff!important;
    background: linear-gradient(135deg, transparent 1.07vw, #ff5555 0) top left, linear-gradient(225deg, transparent 1.07vw,  #ff5555 0) top right, linear-gradient(-45deg, transparent 1.07vw,  #ff5555 0) bottom right, linear-gradient(45deg, transparent 1.07vw, #ff5555 0) bottom left!important;
    background-size: 60% 60%!important;
    background-repeat: no-repeat!important;
}
.default{
    height:calc(100vh - 75vw);
    display: flex;
    justify-content: center;
    align-items: center;
}
.default img{
    width:16vw;
}

.ripple {
    position: relative;
    overflow: hidden;
}

.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 120%;
    height: 100%;
    top: 0;
    left:0;
    pointer-events: none;
background-image: radial-gradient(circle, #f00 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(12, 10);
    opacity: 0;
    transition: transform .2s, opacity .4s;
}

.ripple:active:after {
    transform: scale(0, 0);
    opacity: .3;
    transition: 0s;
}

#publish {
    position: fixed;
    right: 20px;
    bottom: 40px;
    width: 16vw;
    height: 16vw;
    background: url("/home/images/country/note.png") no-repeat;
    background-size: 100% 100%;
}
